<template>
	<view>
		<view class="Addressbox">
			<view class="ProvinceRegion">
				<view class="AddressTitle">省市区</view>
				<view class="picker-item">
					<picker mode="region" @change="handleRegionChange" class="custom-picker">
						<view class="picker-view">
							{{ newAddress.area || '请选择' }}
						</view>
					</picker>
				</view>
			</view>
			<view class="ProvinceRegion">
				<view class="AddressTitle">详细地址</view>
				<view class="picker-item">
					<uv-input placeholder="请输入详细地址" border="" v-model="newAddress.house" style="color: red;"></uv-input>
				</view>
			</view>
			<view class="ProvinceRegion">
				<view class="AddressTitle">姓名</view>
				<view class="picker-item">
					<uv-input placeholder="请输入姓名" border="" v-model="newAddress.name"></uv-input>
				</view>
			</view>
			<view class="ProvinceRegion">
				<view class="AddressTitle">手机号</view>
				<view class="picker-item">
					<uv-input placeholder="请输入手机号" border="" v-model="newAddress.phone" :type="number"></uv-input>
				</view>
			</view>

			<view class="checkbox-item">
				<uv-checkbox-group>
					<uv-checkbox :customStyle="{ margin: '8px' }" v-for="(item, index) in radiolist" :key="index"
						:label="item.label" :name="item.name" :disabled="item.disabled" activeColor="#32b9b3"
						shape="circle" @change="handleDefaultChange" :checked="newAddress.defaultsOn === item.name">
					</uv-checkbox>
				</uv-checkbox-group>

				<!-- <uv-checkbox-group v-model="newAddress.defaultsOn">
					<uv-checkbox v-for="(item, index) in radiolist" :key="index" :label="item.label" :name="item.name"
						:checked="newAddress.defaultsOn === item.name" />
				</uv-checkbox-group> -->

			</view>
			<view class="addAddress-item" @click="handleNewAdd">
				<view class="color-ff size-16">保存地址</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				radiolist: [{
					name: true,
					disabled: false,
					label: '设为默认地址'
				}],
				newAddress: {
					name: '',
					phone: '',
					area: '',
					house: '',
					defaultsOn: false
				}
			};
		},
		onLoad(option) {
			console.log(option.item);
			const item = JSON.parse(decodeURIComponent(option.item));
			console.log('接收到的参数:', item);

			this.newAddress = item
		},
		methods: {
			handleRegionChange(e) {
				const selectedRegion = e.detail.value; // [省份, 城市, 区县]
				this.newAddress.area = selectedRegion.join(' ');
			},
			handleDefaultChange(e) {
				console.log(e);
				this.newAddress.defaultsOn = e;
				console.log(this.newAddress);
			},
			handleNewAdd() { //新增地址
				const {
					area,
					house,
					name,
					phone,
					defaultsOn
				} = this.newAddress;
				if (!area.trim()) {
					uni.showToast({
						title: '请选择省市区',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				if (!house.trim()) {
					uni.showToast({
						title: '请输入详细地址',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				if (!name.trim()) {
					uni.showToast({
						title: '请输入收件人姓名',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				if (!phone.trim()) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				const phoneReg = /^1[3-9]\d{9}$/;
				if (!phoneReg.test(phone.trim())) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none',
						duration: 2000
					});
					return;
				}

				console.log('是否设为默认地址：', this.newAddress);

			}


		}
	}
</script>


<style lang="less">
	.Addressbox {
		padding: 30rpx;

		.ProvinceRegion {
			display: flex;
			align-items: center;
			gap: 40rpx;
			border-bottom: 1px solid #F0F0F0;
			padding: 20rpx 30rpx;

			/* 标签统一宽度 */
			>view:first-child {
				width: 140rpx;
				font-size: 28rpx;
				color: #666;
			}

			.AddressTitle {
				font-size: 16px;
				color: #333;
			}

			.picker-item {
				flex: 1;
				min-height: 70rpx;
				border-radius: 8rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;
				// padding: 0 10rpx;

				/* 统一 picker 和 input 内部样式 */
				.custom-picker,
				.uv-input__input {
					width: 100%;
					height: 70rpx;
					line-height: 70rpx;
					font-size: 16px;
					display: flex;
					align-items: center;
					justify-content: flex-start;
				}

				.uv-input__content__field-wrapper__field {
					color: #999 !important;
				}

				/* 特别处理 picker 内部的 view */
				.picker-view {
					width: 100%;
					height: 70rpx;
					line-height: 70rpx;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					font-size: 14px;
					color: #999 !important;
					padding: 0 30rpx;
				}
			}
		}

		.checkbox-item {
			width: 100%;
			margin: 30rpx 0rpx;
		}

		.addAddress-item {
			width: 100%;
			background-image: linear-gradient(to right, #7cdfe8, #32b9b3);
			background-color: #32b9b3;
			border-radius: 50rpx;
			padding: 20rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: center;
			align-content: center;
			gap: 10rpx;
		}
	}
</style>